<!-- @ts-nocheck -->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import CategoryGrid from '@/components/home/CategoryGrid.vue'
import ProductList from '@/components/home/ProductList.vue'
import ProductWaterfall from '@/components/home/ProductWaterfall.vue'

defineOptions({
  name: 'Home',
})

// 记录列表
const paging = ref<any>(null)
const virtualList = ref([])

// 视图类型：'waterfall' 瀑布流 | 'list' 列表
const viewType = ref<'waterfall' | 'list'>('waterfall')

// 切换视图类型
function toggleViewType() {
  viewType.value = viewType.value === 'waterfall' ? 'list' : 'waterfall'
}

// 监听虚拟列表数组改变
function virtualListChange(vList: any[]) {
  virtualList.value = vList
}

// 查询记录列表
async function queryList(pageNo: number, pageSize: number) {
  try {
    const { data } = await getData() as any

    paging.value.complete(data)
  }
  catch (error) {
    console.error('获取豚豚币记录失败', error)
    paging.value.complete(false)
  }
}

// 模拟后端数据
function getData() {
  return new Promise((resolve) => {
    const imgs = [
      { url: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&h=500', width: 400, height: 500 },
      { url: 'https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?w=350&h=400', width: 350, height: 400 },
      { url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=300&h=380', width: 300, height: 380 },
      { url: 'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=320&h=420', width: 320, height: 420 },
      { url: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=380&h=450', width: 380, height: 450 },
      { url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=360&h=480', width: 360, height: 480 },
      { url: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=340&h=440', width: 340, height: 440 },
      { url: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=330&h=410', width: 330, height: 410 },
      { url: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=310&h=390', width: 310, height: 390 },
      { url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=370&h=460', width: 370, height: 460 },
      { url: 'https://images.unsplash.com/photo-1588508065123-287b28e013da?w=290&h=360', width: 290, height: 360 },
      { url: 'https://images.unsplash.com/photo-1567581935884-3349723552ca?w=350&h=430', width: 350, height: 430 },
    ]

    const products = [
      {
        title: 'iPhone 14 Pro Max',
        desc: `🇺🇸美版资源机无锁 完美 新到
16promax512 黑白金原7658
iPhone 16 Pro提供128GB、256GB、512GB、1TB四个版本，国行售价分别为7999元、8999元、10999元和12999元；iPhone 16 Pro Max则是256GB起步，提供256GB、512GB和1TB三种版本，售价分别为9999元、11999元和13999元。`,
        price: '¥6999',
        location: '北京',
      },
      { title: 'MacBook Pro 16寸', desc: 'M2芯片，32GB内存，1TB存储', price: '¥15999', location: '上海' },
      { title: 'iPad Air 5', desc: '64GB WiFi版，粉色，几乎全新', price: '¥3999', location: '深圳' },
      { title: 'AirPods Pro 2', desc: '全新未拆封，支持空间音频', price: '¥1699', location: '广州' },
      { title: 'Apple Watch S8', desc: '45mm GPS版，运动表带', price: '¥2499', location: '杭州' },
      { title: 'iPhone 13', desc: '128GB 蓝色，8成新', price: '¥4299', location: '成都' },
      { title: 'Mac Studio', desc: 'M1 Ultra芯片，专业工作站', price: '¥25999', location: '南京' },
      { title: 'iPad Pro 12.9', desc: 'M2芯片，256GB，配妙控键盘', price: '¥8999', location: '武汉' },
      { title: 'iPhone SE 3', desc: '64GB 红色，全新', price: '¥2999', location: '西安' },
      { title: 'AirPods Max', desc: '天蓝色，头戴式耳机', price: '¥3999', location: '重庆' },
    ]

    const mockList: any[] = []
    const doFn = (i: number) => {
      const randomIndex = Math.floor(Math.random() * imgs.length)
      const productIndex = i % products.length
      const img = imgs[randomIndex]
      const product = products[productIndex]

      return {
        id: `product_${Date.now()}_${i}`,
        allowEdit: i === 0,
        image: img.url,
        w: img.width,
        h: img.height,
        width: img.width,
        title: product.title,
        desc: product.desc,
        price: product.price,
        location: product.location,
      }
    }

    // 模拟异步
    setTimeout(() => {
      for (let i = 0; i < 20; i++) {
        mockList.push(doFn(i))
      }
      resolve({ data: mockList })
    }, 200)
  })
}
</script>

<template>
  <view class="min-h-screen bg-[#121212]">
    <z-paging
      ref="paging" use-virtual-list :force-close-inner-list="true" safe-area-inset-bottom
      cell-height-mode="dynamic" @virtual-list-change="virtualListChange" @query="queryList"
    >
      <template #top>
        <!-- 顶部导航栏 -->
        <wd-navbar :bordered="false" safe-area-inset-top placeholder fixed>
          <template #left>
            <view class="flex items-center">
              <view class="mr-14px flex items-center justify-center">
                <image src="/static/images/home/logo.png" class="h-45px w-45px" mode="aspectFit" alt="有货国际" />
                <view class="ml-6px flex flex-col items-start">
                  <text class="mb-5px text-16px text-white/90 font-medium leading-none">
                    有货国际
                  </text>
                  <text class="text-9px text-[#919191] leading-none">
                    购物，是一种生活
                  </text>
                </view>
              </view>

              <view class="i-carbon-search mr-4 text-xl text-white" />
            </view>
          </template>
        </wd-navbar>
      </template>
      <!-- 问候语 -->
      <view class="mb-60rpx ml-56rpx mt-54rpx">
        <text class="text-2xl text-white">
          晚上好, 峰哥
        </text>
      </view>
      <!-- 分类网格和标签页 -->
      <view class="mb-24rpx">
        <CategoryGrid />
      </view>

      <!-- 商品展示区域 -->
      <view class="box-border">
        <!-- 瀑布流视图 -->
        <ProductWaterfall v-show="viewType === 'waterfall'" :data="virtualList" />
        <!-- 列表视图 -->
        <ProductList v-show="viewType === 'list'" :data="virtualList" />
      </view>
    </z-paging>

    <!-- 视图切换按钮 -->
    <image
      src="/static/images/home/change.png"
      class="fixed bottom-166px right-13px z-10000 h-29px w-29px cursor-pointer" mode="aspectFit"
      @click="toggleViewType"
    />
  </view>
</template>
